<template>
  <div class="box">
    <h1>我的Vue项目</h1>
    <button @click="comName = 'Left'">展示Left组件</button>
    <button @click="comName = 'Right'">展示Right组件</button>
    <div class="main">
      <!-- keep-alive可以缓存所有的标签 -->
      <!-- 默认就会缓存所有组件 -->
      <!-- keep-alive 的 include 属性，可以控制哪些组件被缓存 -->
      <!-- 使用include缓存组件的时候，逗号前后，千万不要有空格 -->
      <keep-alive include="Left,Right">
        <abc :is="comName"></abc>
      </keep-alive>
    </div>
  </div>
</template>

<script>
// 导入Left、Right组件，并注册

import Left from './components/Left.vue'
import Right from './components/Right.vue'

export default {
  data() {
    return {
      comName: 'Left'
    }
  },
  // 注册组件
  components: {
    Left: Left,
    Right: Right
  }
}
</script>

<style lang="less" scoped>
.box {
  background-color: cornflowerblue;
  padding: 20px;
  .main {
    display: flex;
    > div {
      flex: 1;
      min-height: 300px;
      margin: 10px;
      padding: 10px;
    }
  }
}
</style>
